<template>
    <el-menu background-color="#304156" text-color="#ffffff" class="el-menu-vertical-demo" :collapse="isCollapse"
        :unique-opened="true" :default-active="$route.fullPath" :router="true">
        <el-menu-item class="bg-[#222e3d] font-bold">
            <el-icon class="is-loading" style="height: 90%; width: 28%;">
                <Loading v-if="isCollapse" />
                <el-image v-if="!isCollapse" class="h-[40px] w-[40px] rounded-full" :src="baseURL + loginUserInfo.admin_photo" lazy></el-image>
            </el-icon>
            <span class="ml-[5px] italic" @click="$router.replace({name:'DataView'})"
                v-show="!isCollapse">悠优点餐后台系统</span>
        </el-menu-item>
        <el-sub-menu index="a">
            <template #title>
                <el-icon>
                    <Grid />
                </el-icon>
                <span>菜品分类</span>
            </template>
            <el-menu-item index="/Manager/CategoryInfoList">
                <el-icon>
                    <Operation />
                </el-icon>
                <template #title>分类列表</template>
            </el-menu-item>
            <el-menu-item index="/Manager/AddCategoryInfo">
                <el-icon>
                    <DocumentAdd />
                </el-icon>
                <template #title>新增分类</template>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="b">
            <template #title>
                <el-icon>
                    <Postcard />
                </el-icon>
                <span>菜品名称</span>
            </template>
            <el-menu-item index="/Manager/FoodInfoList">
                <el-icon>
                    <List />
                </el-icon>
                <template #title>菜品列表</template>
            </el-menu-item>
            <el-menu-item index="/Manager/AddFoodInfo">
                <el-icon>
                    <Rank />
                </el-icon>
                <template #title>新增菜品</template>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="c">
            <template #title>
                <el-icon>
                    <Stamp />
                </el-icon>
                <span>用户信息</span>
            </template>
            <el-menu-item index="/Manager/UserInfoList">
                <el-icon>
                    <List />
                </el-icon>
                <template #title>用户信息列表</template>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="d">
            <template #title>
                <el-icon>
                    <Van />
                </el-icon>
                <span>收货地址信息</span>
            </template>
            <el-menu-item index="/Manager/AddressInfoList">
                <el-icon>
                    <List />
                </el-icon>
                <template #title>地址信息列表</template>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="e">
            <template #title>
                <el-icon>
                    <Printer />
                </el-icon>
                <span>订单管理</span>
            </template>
            <el-menu-item index="/Manager/OrderInfoList">
                <el-icon>
                    <List />
                </el-icon>
                <template #title>订单列表</template>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="f">
            <template #title>
                <el-icon>
                    <Microphone />
                </el-icon>
                <span>评论管理</span>
            </template>
            <el-menu-item index="/Manager/CommentInfoList">
                <el-icon>
                    <List />
                </el-icon>
                <template #title>评论列表</template>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="g">
            <template #title>
                <el-icon>
                    <Setting />
                </el-icon>
                <span>管理员信息</span>
            </template>
            <el-menu-item index="/Manager/AdminInfoList">
                <el-icon>
                    <List />
                </el-icon>
                <template #title>管理员列表</template>
            </el-menu-item>
            <el-menu-item index="/Manager/AddAdminInfo">
                <el-icon>
                    <StarFilled />
                </el-icon>
                <template #title>新增管理员</template>
            </el-menu-item>
            <el-menu-item index="/Manager/EditAdminPassword">
                <el-icon>
                    <BellFilled />
                </el-icon>
                <template #title>修改密码</template>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup>

import { useRouter } from "vue-router"
import { ref, computed, inject } from 'vue'
import { mainStore } from "../store";
import { storeToRefs } from "pinia"
import {
    Setting,
    Grid,
    Operation,
    DocumentAdd,
    Postcard,
    List,
    Rank,
    Stamp,
    Van,
    Printer,
    Microphone,
    BellFilled,
    StarFilled,
    Loading
} from '@element-plus/icons-vue'

const baseURL = inject("baseURL")
const store = mainStore();
// const isCollapse = computed(() => store.isCollapse);
// 一般情况下，store不解构，如果非要解构，则使用storeToRefs
const { isCollapse, loginUserInfo } = storeToRefs(store);
</script>

<style lang="scss" scoped>
:depp(.el-menu-vertical-demo:not(.el-menu--collapse)) {
    width: 200px;
    min-height: 400px;
}

:deep(.el-menu) {
    border-right: none !important;
}
</style>